<template>
	<!-- 完善用户信息 -->
	<view class="authentication">
		<view>
			<u-toast ref="uToast" />
		</view>
		<view class="form">

			<view class="userinfo">
				<label>
					<view class="title">
						真实姓名
					</view>
					<view class="field">
						<u-input v-model="name" type="text" placeholder-style="font-size: 24rpx; color: #C0C4CC;"
							placeholder="请输入您的真实姓名" :clearable="false" input-align="right"></u-input>

					</view>
				</label>
				<label>
					<view class="title">
						收货人
					</view>
					<view class="field">
						<u-input v-model="harvestName" type="text" placeholder-style="font-size: 24rpx; color: #C0C4CC;"
							placeholder="例:张三" :clearable="false" input-align="right"></u-input>

					</view>
				</label>
				<label>
					<view class="title">
						联系电话
					</view>
					<view class="field">
						<u-input v-model="mobile" maxlength="19" type="text"
							placeholder-style="font-size: 24rpx; color: #C0C4CC;" placeholder="例:150..."
							:clearable="false" input-align="right"></u-input>

					</view>
				</label>


				<view class="uni-list-cell">
					<view class="uni-list-cell-left">
						所属地区
					</view>
					<view class="uni-list-cell-db">
						<picker @change="bindPickerChange" @columnchange="columnchange" :range="array" range-key="name"
							:value="value" mode="multiSelector">
							{{address}}
						</picker>
					</view>

				</view>
				<label>
					<view class="title">
						收获地址
					</view>
					<view class="field">
						<u-input v-model="detailAddress" maxlength="19" type="text"
							placeholder-style="font-size: 24rpx; color: #C0C4CC;" placeholder="例:北京..."
							:clearable="false" input-align="right"></u-input>
					</view>
				</label>
			</view>
			<view class="tip">
				注：请认真填写信息，避免邮寄商品时无法收到。
			</view>

			<view class="btn" @click="submit">
				提交保存
			</view>
		</view>
	</view>
</template>

<script>
	import request from '@/util/request.js'
	import {
		phoneValidator
	} from '@/util/validator.js'
	import AllAddress from '@/data.js'
	let selectVal = ['', '', '']
	export default {

		data() {
			return {
				address: '请选择所在地区',
				value: [0, 0, 0],
				array: [],
				index: 0,
				harvestName: '',
				mobile: '',
				detailAddress: '',
				name: "",
				postCountyCode: ''
			}
		},

		created() {
			this.initSelect()
		},
		methods: {
			show(title, type, callback) {
				this.$refs.uToast.show({
					title,
					type: type ? type : "default",
					duration: 2000,
					position: "top",
					callback: callback ? callback : () => {}
				})
			},
			// 获取用户信息
			getUserInfo() {
				request.globalRequest({
					url: "/api/member/user/info"
				}).then(res => {
					console.log(res);
					this.name = res.idName
					this.address = res.postProvince + '/' + res.postCity + '/' + res.postCounty
					this.detailAddress = res.postAddress
					this.harvestName = res.postName
					this.mobile = res.postPhone
				})
			},
			submit() {
				if (this.name == "") {
					return this.show("真实姓名不能为空~")
				}
				if (this.harvestName == "") {
					return this.show("收获人姓名不能为空~")
				}
				if (this.mobile == "") {
					return this.show("联系电话不能为空~")
				}
				if (this.address == "请选择所在地区") {
					return this.show("请选择所属地区~")
				}
				if (this.detailAddress == "") {
					return this.show("收货地址不能为空~")
				}
				if (!phoneValidator(this.mobile, this.show)) {
					return
				}
				console.log("提交");
				request.globalRequest({
					url: '/api/member/user/info_edit',
					method: "post",
					data: {
						idName: this.name,
						postName: this.harvestName,
						postPhone: this.mobile,
						postAddress: this.detailAddress,
						postCountyCode: this.postCountyCode,
						parent: '15772725805',
						system_config_ts: "关闭"
					}
				}).then(res => {
					if (res.status == '0') {
						this.show("保存成功", 'success', () => {
							uni.navigateBack({
								delta: 1
							})
						})
					}
				})
			},
			// 初始化地址选项
			initSelect() {
				this.updateSourceDate() // 更新源数据
					.updateAddressDate() // 更新结果数据
					.$forceUpdate() // 触发双向绑定
			},
			// 地址控件改变控件
			columnchange(d) {
				this.updateSelectIndex(d.detail.column, d.detail.value) // 更新选择索引
					.updateSourceDate() // 更新源数据
					.updateAddressDate() // 更新结果数据
					.$forceUpdate() // 触发双向绑定
			},

			/**
			 * 更新源数据
			 * */
			updateSourceDate() {
				this.array = []
				this.array[0] = AllAddress.map(obj => {
					return {
						name: obj.name
					}
				})
				this.array[1] = AllAddress[this.value[0]].cityList.map(obj => {
					return {
						name: obj.name
					}
				})
				this.array[2] = AllAddress[this.value[0]].cityList[this.value[1]].areaList.map(obj => {
					return {
						name: obj.name
					}
				})
				return this
			},

			/**
			 * 更新索引
			 * */
			updateSelectIndex(column, value) {
				let arr = JSON.parse(JSON.stringify(this.value))
				arr[column] = value
				if (column === 0) {
					arr[1] = 0
					arr[2] = 0
				}
				if (column === 1) {
					arr[2] = 0
				}
				this.value = arr
				return this
			},

			/**
			 * 更新结果数据 
			 * */
			updateAddressDate() {
				selectVal[0] = this.array[0][this.value[0]].name
				selectVal[1] = this.array[1][this.value[1]].name
				selectVal[2] = this.array[2][this.value[2]].name
				return this
			},

			/**
			 * 点击确定
			 * */
			bindPickerChange(e) {
				this.address = selectVal.join('/')
				selectVal[2]
				AllAddress.some(pro => {
					if (pro.name == selectVal[0]) {
						pro.cityList.some(city => {
							if (city.name == selectVal[1]) {
								city.areaList.some(area => {
									if (area.name == selectVal[2]) {
										this.postCountyCode = area.code
										return true
									}
								})
								return true
							}
						})
						return true
					}
				})
				return this
			}

		},
		onLoad() {
			const usertoken = uni.getStorageSync('usertoken')
			if (!usertoken) {
				return uni.navigateTo({
					url: '/pages/login/login'
				})
			}
			this.getUserInfo()
		}
	}
</script>

<style lang="scss" scoped>
	.authentication {
		padding: 0 20rpx;

		.form {
			padding: 20rpx 20rpx 30rpx;
			background-color: #fff;

			.userinfo {

				.uni-list-cell {
					display: flex;
					color: #666666;
					font-size: 24rpx;
					padding: 20rpx;
					border-bottom: 1px solid #f1f1f1;
					justify-content: space-between;
					margin-bottom: 20rpx;
				}

				label {
					display: flex;
					border-bottom: 1px solid #f1f1f1;
					justify-content: space-between;
					margin-bottom: 20rpx;

					.title {
						font-size: 24rpx;
						color: #666666;
						padding: 20rpx;
						margin-right: 30rpx;
					}

					.field {
						flex: 1;
					}
				}
			}

			.tip {
				color: red;
				padding: 20rpx;
				text-align: center;
				font-size: 28rpx;
			}

			.btn {
				margin-top: 30rpx;
				text-align: center;
				background-color: #007AFF;
				border-radius: 16rpx;
				color: #fff;
				font-size: 28rpx;
				padding: 14rpx 0;
			}
		}
	}
</style>
